<style>
    .time-input {
        border-radius: 6px !important;
    }
    .btn-flat {
        margin-left: -50px !important;
        border-top-right-radius: 6px !important;
        border-bottom-right-radius: 6px !important;
    }
</style>
<% layout('/layouts/default.html', {title: '调整请假申请', libs: ['validate']}){ %>
<div class="main-content">
    <div class="box box-main">
        <#form:form id="inputForm" model="${testLeave}" action="${ctx}/test/leave/complete" method="post" class="form-horizontal">
            <div class="box-body">
                <div class="form-unit">${text('基本信息')}</div>
                <#form:hidden path="tid"/>
                <#form:hidden path="taskId"/>
                <#form:hidden path="totalTime"/>
                <#form:hidden path="saveEntity" value="${testLeave.saveEntity}"/>
                <input type="hidden" name="boolReApply" id="boolReApply" />
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required hide">*</span> ${text('申请人')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:input path="user.userName" maxlength="100" class="form-control" disabled="true"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required hide">*</span> ${text('申请时间')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:input path="applyTime" maxlength="18" class="form-control digits" disabled="true"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required">*</span> ${text('标题')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:input path="title" maxlength="100" class="form-control required"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required">*</span> ${text('请假时长')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <span class="input-group-btn">
                                        <input id="totalTimeText" class="form-control time-input required" type="text" disabled="true">
                                        <input type="button" id="calculateTimeClick" value="${text('计算')}" class="btn btn-flat" autocomplete="off"/>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required">*</span> ${text('开始时间')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:input path="startTime" readonly="true" maxlength="20" class="form-control laydate required"
                                dataFormat="datetime" data-type="datetime" data-format="yyyy-MM-dd HH:mm"/>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="control-label col-sm-4" title="">
                                <span class="required">*</span> ${text('结束时间')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-8">
                                <#form:input path="endTime" readonly="true" maxlength="20" class="form-control laydate required"
                                dataFormat="datetime" data-type="datetime" data-format="yyyy-MM-dd HH:mm"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label col-sm-2" title="">
                                <span class="required">*</span> ${text('原因')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-10">
                                <#form:textarea path="reason" rows="4" maxlength="500" class="form-control required"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-unit">${text('审批信息')}</div>
                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label class="control-label col-sm-2" title="">
                                <span class="required hide">*</span> ${text('是否继续申请')}：<i class="fa icon-question hide"></i></label>
                            <div class="col-sm-10">
                                <#form:select name="p_B_reApply" id="reApply" dictType="flow_re_apply" blankOption="false" class="form-control"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-footer">
                <div class="row">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-sm btn-primary" id="btnSubmit"><i class="fa fa-check"></i> ${text('保 存')}</button>&nbsp;
                        <button type="button" class="btn btn-sm btn-default" id="btnCancel" onclick="js.closeCurrentTabPage()"><i class="fa fa-reply-all"></i> ${text('关 闭')}</button>
                    </div>
                </div>
            </div>
        </#form:form>
    </div>
</div>
<% } %>
<script src="${ctxStatic}/activiti.6.0/js/activiti.js"></script>
<script>
    $(function () {
        var totalTime = $("#totalTime").val();
        var dateSub = formatTotalDateSub(totalTime);
        $("#totalTimeText").val(dateSub);
    });
    // 监听开始和结束日期填写，动态生成请假时长
    $('#calculateTimeClick').click(function() {
        calculateTimeClick();
    });
    function calculateTimeClick(callback) {
        if (!$("#startTime").val() || !$("#endTime").val()) {
            js.alert("开始时间和结束时间不能为空！", function(){});
            return false;
        }
        if (validateStartTimeAndEndTime()) {
            var totalSecond = calcTotalSecond($("#startTime").val(), $("#endTime").val());
            $("#totalTime").val(totalSecond);
            var dateSub = formatTotalDateSub(totalSecond);
            $("#totalTimeText").val(dateSub);

            callback();
        }
    }
    function validateStartTimeAndEndTime() {
        if ($("#startTime").val() >= $("#endTime").val()) {
            js.alert("结束时间必须大于开始时间！");
            return false;
        }
        return true;
    }
    $("#inputForm").validate({
        submitHandler: function(form){
            $("#boolReApply").val($("#reApply").val());
            calculateTimeClick(function(){
                js.ajaxSubmitForm($(form), function(data){
                    js.showMessage(data.message);
                    if(data.result == Global.TRUE){
                        js.closeCurrentTabPage(function(contentWindow){
                            contentWindow.page();
                        });
                    }
                }, "json");
            });
        }
    });
</script>